<template>
  <div id="index" class="index has-header has-menu">
    <it-header title="666">
      <i slot="header-right" class="icon ion-ios-pin-outline"></i>
    </it-header>
    <div class="banner">
      <mt-swipe :auto="0">
        <mt-swipe-item>
          <div class="banner-container">
            <div class="weekday">{{weekday}} <span class="day-of-year">已过天数:</span></div>
            <div class="date">
              <span>{{timeStamp | itDatetimeYMD-ZH}}</span>
              <span>{{period}}</span>
              <span class="fr">({{dayOfYear}}/{{daysOfYear}})</span>
            </div>
          </div>
          <div class="icon-notification">
            <i class="icon ion-ios-notifications"></i>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>2</mt-swipe-item>
        <mt-swipe-item>3</mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="sign-in">
      <div class="on-duty border-b-1px">
        <div class="day-night-icon">
          <i class="icon ion-ios-partly-sunny-outline"></i>
        </div>
        <div class="duty-title-time">
          <div class="duty-title ">上班</div>
          <div class="duty-time">09:00</div>
        </div>
        <div class="touch-active sign-in-button">未打卡</div>
      </div>
      <div class="off-duty border-b-1px">
        <div class="day-night-icon">
          <i class="icon ion-ios-moon-outline"></i>
        </div>
        <div class="duty-title-time">
          <div class="duty-title ">下班</div>
          <div class="duty-time">09:00</div>
        </div>
        <div class="touch-active sign-in-button">未打卡</div>
      </div>
    </div>
    <it-menu></it-menu>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  name: 'index',
  data() {
    return {
      timeStamp: 0,
      period: '',
      weekday: '',
      daysOfYear: 0, // 一年的总天数
      dayOfYear: 0 // 一年中的第n天
    }
  },
  created() {
    moment.locale('zh-cn', {
      meridiem: function(hour, minute, isLowercase) {
        if (hour < 4) {
          return '夜深了，注意休息'
        } else if (hour < 9) {
          return '准备上班'
        } else if (hour < 12) {
          return '上午工作中ing'
        } else if (hour < 13 || hour === 13 && minute < 30) {
          return '午睡一会吧'
        } else if (hour < 17 || hour === 17 && minute < 30) {
          return '下午工作中ing'
        } else if (hour < 22 || hour === 22 && minute < 59) {
          return '加班中ing'
        }
      }
    })
  },
  mounted() {
    this.initDate()
  },
  methods: {
    initDate() {
      this.timeFormate()
      setInterval(this.timeFormate, 60 * 1000)
    },
    timeFormate() {
      this.daysOfYear = this.getDaysOfYear()
      this.dayOfYear = moment().dayOfYear() // 当前日期是一年中的第n天
      this.timeStamp = new Date().getTime()
      this.weekday = moment(this.timeStamp).format('dddd')
      this.period = moment(this.timeStamp).format('a')
    },
    getDaysOfYear() { // 获得今年的总天数
      var days = new Date(moment().year(), 2, 0).getDate() // 得到今年二月份的天数
      if (days === 28) {
        return 365
      } else {
        return 366
      }
    }
  }
}

</script>
<style lang="scss" rel="stylesheet/scss">
.index {
  height: 100%;
}

.banner {
  height: 3.8rem;
  background-color: #5396c5;
}

.banner-container {
  padding: 0 0.2rem;
  color: #fff;
}

.weekday {
  position: relative;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.day-of-year {
  position: absolute;
  top: 100%;
  right: 0;
  font-size: 16px;
}

.date {
  margin-top: 0.4rem;
}

.icon-notification {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1rem;
  height: 1rem;
  color: #fff;
  font-size: 0.5rem;
}

.sign-in {
  height: 65%;
}

.on-duty,
.off-duty {
  height: 1.8rem;
  padding: 0.4rem 0.2rem;
  box-sizing: border-box;
}

.day-night-icon {
  float: left;
  width: 1rem;
  height: 1rem;
  font-size: 0.6rem;
  margin-right: 0.2rem;
  border-radius: 3px;
  color: #fff;
  background-color: #1C96D4;
}

.duty-title-time {
  float: left;
  width: 40%;
  height: 1rem;
}

.duty-title {
  font-weight: 700;
  line-height: 0.5rem;
}

.duty-time {
  color: #999999;
  line-height: 0.5rem;
}

.sign-in-button {
  float: right;
  width: 1.7rem;
  line-height: 1rem;
  text-align: center;
  background-color: #1CAFD4;
  border-radius: 3px;
}

</style>
